@extends('cms/system/admin/template/theme_default/common')
@section('page-body')
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form layui-form-pane" id="exam-topic-form" lay-filter="exam-topic-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属题库</label>
                        @if(isset($group) && $group)
                            <div class="layui-input-block">
                                <input id="group-id" class="layui-input" type="hidden" name="group_id" value="{{$group['id'] ?? 0}}" />
                                <input class="layui-input" type="text" value="{{$group['name'] ?? ''}}" placeholder="请选择所属题库" autocomplete="off" lay-verify="required" required readonly />
                            </div>
                        @else
                            <div class="layui-input-block">
                                <input id="group-id" class="layui-input" type="hidden" name="group_id" value="{{$data['group_id'] ?? 0}}" />
                                <input id="group-select" class="layui-input" type="text" value="{{$data['group']['name'] ?? ''}}" placeholder="请选择所属题库" autocomplete="off" lay-verify="required" required readonly />
                            </div>
                        @endif
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">题目类型</label>
                        <div class="layui-input-block">
                            <select id="type" name="type" lay-filter="type">
                                @if(isset($data))
                                    @foreach($type as $type_k => $type_v)
                                        <option value="{{$type_k}}" {{$data['type'] == $type_k ? 'selected' : 'disabled'}}>{{$type_v['name']}}</option>
                                    @endforeach
                                @else
                                    @foreach($type as $type_k => $type_v)
                                        <option value="{{$type_k}}">{{$type_v['name']}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <fieldset class="layui-elem-field">
                            <legend>题目</legend>
                            <div class="layui-field-box layui-form-pane">
                                <!--题目-->
                                <div class="layui-form-item layui-form-text">
                                    <div class="layui-input-block">
                                        <textarea class="layui-textarea" name="content[subject]" id="content-subject" autocomplete="off">{{$data['content']['subject'] ?? ''}}</textarea>
                                    </div>
                                </div>
                                <!--答案-->
                                <div id="topic-answer-area"></div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="layui-form-item layui-hide">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <input class="layui-btn" type="button" value="添加" id="submit-create" lay-submit lay-filter="submit-create" />
                            <input class="layui-btn" type="button" value="更新" id="submit-update" lay-submit lay-filter="submit-update" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @verbatim
        <!--region 单项选择-->
        <script type="text/html" id="topic-select-single">
            {{# layui.each(d.value, function (value_k, value_v) { }}
            <fieldset class="layui-elem-field" id="topic-answer-{{ value_v.id }}" data-id="{{ value_v.id }}">
                <legend>
                    <span>备选答案-{{ value_v.id }}</span>
                    <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="createAnswerItemFunc('select-single')"><i class="layui-icon layui-icon-edit"></i>添加</a>
                    {{# if (value_k < 2) { }}
                    <a class="layui-btn layui-btn-danger layui-btn-disabled layui-btn-xs"><i class="layui-icon layui-icon-close"></i>删除</a>
                    {{# } else { }}
                    <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteAnswerItemFunc({{ value_v.id }})"><i class="layui-icon layui-icon-close"></i>删除</a>
                    {{# } }}
                </legend>
                <div class="layui-field-box layui-form-pane">
                    <div class="layui-form-item layui-form-text">
                        <div class="layui-input-block">
                            <textarea name="content[answer][{{ value_k }}][content]" placeholder="请输入内容" class="layui-textarea">{{ value_v.content }}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">设为答案</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="content[answer][{{ value_k }}][id]" value="{{ value_v.id }}" />
                            {{# if (value_v.is_right == 1) { }}
                            <input type="checkbox" name="content[answer][{{ value_k }}][is_right]" value="1" lay-filter="topicIsRight" lay-skin="switch" lay-text="正确|错误" checked />
                            {{# } else { }}
                            <input type="checkbox" name="content[answer][{{ value_k }}][is_right]" value="1" lay-filter="topicIsRight" lay-skin="switch" lay-text="正确|错误" />
                            {{# } }}
                        </div>
                    </div>
                </div>
            </fieldset>
            {{# }); }}
        </script>
        <script type="text/html" id="topic-select-single-item">
            <fieldset class="layui-elem-field" id="topic-answer-{{ d.id }}" data-id="{{ d.id }}">
                <legend>
                    <span>备选答案-{{ d.id }}</span>
                    <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="createAnswerItemFunc('select-single')"><i class="layui-icon layui-icon-edit"></i>添加</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteAnswerItemFunc({{ d.id }})"><i class="layui-icon layui-icon-close"></i>删除</a>
                </legend>
                <div class="layui-field-box layui-form-pane">
                    <div class="layui-form-item layui-form-text">
                        <div class="layui-input-block">
                            <textarea name="content[answer][{{ d.id }}][content]" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">设为答案</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="content[answer][{{ d.id }}][id]" value="{{ d.id }}" />
                            <input type="checkbox" name="content[answer][{{ d.id }}][is_right]" value="1" lay-filter="topicIsRight" lay-skin="switch" lay-text="正确|错误" />
                        </div>
                    </div>
                </div>
            </fieldset>
        </script>
        <!--endregion-->
        <!--region 多项选择-->
        <script type="text/html" id="topic-select-multi">
            {{# layui.each(d.value, function (value_k, value_v) { }}
            <fieldset class="layui-elem-field" id="topic-answer-{{ value_v.id }}" data-id="{{ value_v.id }}">
                <legend>
                    <span>备选答案-{{ value_v.id }}</span>
                    <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="createAnswerItemFunc('select-single')"><i class="layui-icon layui-icon-edit"></i>添加</a>
                    {{# if (value_k < 2) { }}
                    <a class="layui-btn layui-btn-danger layui-btn-disabled layui-btn-xs"><i class="layui-icon layui-icon-close"></i>删除</a>
                    {{# } else { }}
                    <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteAnswerItemFunc({{ value_v.id }})"><i class="layui-icon layui-icon-close"></i>删除</a>
                    {{# } }}
                </legend>
                <div class="layui-field-box layui-form-pane">
                    <div class="layui-form-item layui-form-text">
                        <div class="layui-input-block">
                            <textarea name="content[answer][{{ value_k }}][content]" placeholder="请输入内容" class="layui-textarea">{{ value_v.content }}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">设为答案</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="content[answer][{{ value_k }}][id]" value="{{ value_v.id }}" />
                            {{# if (value_v.is_right == 1) { }}
                            <input type="checkbox" name="content[answer][{{ value_k }}][is_right]" value="1" lay-filter="topicIsRight" lay-skin="switch" lay-text="正确|错误" checked />
                            {{# } else { }}
                            <input type="checkbox" name="content[answer][{{ value_k }}][is_right]" value="1" lay-filter="topicIsRight" lay-skin="switch" lay-text="正确|错误" />
                            {{# } }}
                        </div>
                    </div>
                </div>
            </fieldset>
            {{# }); }}
        </script>
        <script type="text/html" id="topic-select-multi-item">
            <fieldset class="layui-elem-field" id="topic-answer-{{ d.id }}" data-id="{{ d.id }}">
                <legend>
                    <span>备选答案-{{ d.id }}</span>
                    <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="createAnswerItemFunc('select-single')"><i class="layui-icon layui-icon-edit"></i>添加</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteAnswerItemFunc({{ d.id }})"><i class="layui-icon layui-icon-close"></i>删除</a>
                </legend>
                <div class="layui-field-box layui-form-pane">
                    <div class="layui-form-item layui-form-text">
                        <div class="layui-input-block">
                            <textarea name="content[answer][{{ d.id }}][content]" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">设为答案</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="content[answer][{{ d.id }}][id]" value="{{ d.id }}" />
                            <input type="checkbox" name="content[answer][{{ d.id }}][is_right]" value="1" lay-filter="topicIsRight" lay-skin="switch" lay-text="正确|错误" />
                        </div>
                    </div>
                </div>
            </fieldset>
        </script>
        <!--endregion-->
        <!--region 不定选择-->
        <script type="text/html" id="topic-select-unset">
            {{# layui.each(d.value, function (value_k, value_v) { }}
            <fieldset class="layui-elem-field" id="topic-answer-{{ value_v.id }}" data-id="{{ value_v.id }}">
                <legend>
                    <span>备选答案-{{ value_v.id }}</span>
                    <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="createAnswerItemFunc('select-single')"><i class="layui-icon layui-icon-edit"></i>添加</a>
                    {{# if (value_k < 2) { }}
                    <a class="layui-btn layui-btn-danger layui-btn-disabled layui-btn-xs"><i class="layui-icon layui-icon-close"></i>删除</a>
                    {{# } else { }}
                    <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteAnswerItemFunc({{ value_v.id }})"><i class="layui-icon layui-icon-close"></i>删除</a>
                    {{# } }}
                </legend>
                <div class="layui-field-box layui-form-pane">
                    <div class="layui-form-item layui-form-text">
                        <div class="layui-input-block">
                            <textarea name="content[answer][{{ value_k }}][content]" placeholder="请输入内容" class="layui-textarea">{{ value_v.content }}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">设为答案</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="content[answer][{{ value_k }}][id]" value="{{ value_v.id }}" />
                            {{# if (value_v.is_right == 1) { }}
                            <input type="checkbox" name="content[answer][{{ value_k }}][is_right]" value="1" lay-filter="topicIsRight" lay-skin="switch" lay-text="正确|错误" checked />
                            {{# } else { }}
                            <input type="checkbox" name="content[answer][{{ value_k }}][is_right]" value="1" lay-filter="topicIsRight" lay-skin="switch" lay-text="正确|错误" />
                            {{# } }}
                        </div>
                    </div>
                </div>
            </fieldset>
            {{# }); }}
        </script>
        <script type="text/html" id="topic-select-unset-item">
            <fieldset class="layui-elem-field" id="topic-answer-{{ d.id }}" data-id="{{ d.id }}">
                <legend>
                    <span>备选答案-{{ d.id }}</span>
                    <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="createAnswerItemFunc('select-single')"><i class="layui-icon layui-icon-edit"></i>添加</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteAnswerItemFunc({{ d.id }})"><i class="layui-icon layui-icon-close"></i>删除</a>
                </legend>
                <div class="layui-field-box layui-form-pane">
                    <div class="layui-form-item layui-form-text">
                        <div class="layui-input-block">
                            <textarea name="content[answer][{{ d.id }}][content]" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">设为答案</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="content[answer][{{ d.id }}][id]" value="{{ d.id }}" />
                            <input type="checkbox" name="content[answer][{{ d.id }}][is_right]" value="1" lay-filter="topicIsRight" lay-skin="switch" lay-text="正确|错误" />
                        </div>
                    </div>
                </div>
            </fieldset>
        </script>
        <!--endregion-->
        <!--region 判断正误-->
        <script type="text/html" id="topic-select-decide">
            {{# layui.each(d.value, function (value_k, value_v) { }}
            <fieldset class="layui-elem-field" id="topic-answer-{{ value_v.id }}" data-id="{{ value_v.id }}">
                <legend>
                    <span>备选答案-{{ value_v.id }}</span>
                </legend>
                <div class="layui-field-box layui-form-pane">
                    <div class="layui-form-item layui-form-text">
                        <div class="layui-input-block">
                            <textarea name="content[answer][{{ value_k }}][content]" placeholder="请输入内容" class="layui-textarea">{{ value_v.content }}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">设为答案</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="content[answer][{{ value_k }}][id]" value="{{ value_v.id }}" />
                            {{# if (value_v.is_right == 1) { }}
                            <input type="checkbox" name="content[answer][{{ value_k }}][is_right]" value="1" lay-filter="topicIsRight" lay-skin="switch" lay-text="正确|错误" checked />
                            {{# } else { }}
                            <input type="checkbox" name="content[answer][{{ value_k }}][is_right]" value="1" lay-filter="topicIsRight" lay-skin="switch" lay-text="正确|错误" />
                            {{# } }}
                        </div>
                    </div>
                </div>
            </fieldset>
            {{# }); }}
        </script>
        <!--endregion-->
    @endverbatim
    <script type="text/javascript">
        // 当前iframe层的索引
        var layerIndex = top.layui.layer.getFrameIndex(window.name);
        layui.config({
            base: '/layui-admin/'
        }).extend({
            index: 'lib/index'
        }).use(['index'], function () {
            // 类型设置
            var topicTypeSetting = @json($type);
            // 题型类型
            var topicTypeValue = layui.$('#type').val();
            // 题型配置
            var topicTypeConfig = topicTypeSetting[topicTypeValue];
            // 答案区域
            var topicAnswerArea = layui.$('#topic-answer-area');
            // 答案模板
            var topicAnswerTemplate = layui.$('#topic-' + topicTypeValue).html();
            // 渲染数据
            layui.laytpl(topicAnswerTemplate).render(topicTypeConfig.field.answer, function (html) {
                topicAnswerArea.html(html);
                layui.form.render();
            });

            // 类型切换
            layui.form.on('select(type)', function (data) {
                topicTypeConfig = topicTypeSetting[data.value];
                // 切换模板
                topicAnswerTemplate = layui.$('#topic-' + data.value).html();
                // 渲染数据
                layui.laytpl(topicAnswerTemplate).render(topicTypeConfig.field.answer, function (html) {
                    topicAnswerArea.html(html);
                    layui.form.render();
                });
            });
            // 设置正确答案
            layui.form.on('switch(topicIsRight)', function (data) {
                switch (topicTypeValue) {
                    case 'select-single': // 单项选择
                        if (data.elem.checked) { // 选中
                            var switchList = layui.$('#topic-answer-area :checkbox');
                            switchList.each(function (switch_k, switch_v) {
                                var switchDom = layui.$(switch_v);
                                if (data.elem.name != switchDom.attr('name') && switchDom.is(':checked')) {
                                    switchDom.attr('checked', false);
                                }
                            });
                        }
                        // 统计选中
                        var switchCount = layui.$('#topic-answer-area :checkbox:checked').length;
                        if (switchCount != 1) {
                            top.layui.layer.alert('单项选择至少需要一个正确答案');
                            data.elem.checked = true;
                        }
                        // 渲染表单
                        layui.form.render();
                        break;
                }
            });

            // 选择题库
            layui.$('#group-select').on('click', function () {
                // region 处理已选中 +++++
                var selectValueDom = layui.$('#group-id');
                var selectValue = selectValueDom.val();
                var selectTextDom = layui.$('#group-select');
                // endregion

                var selectLayer = top.layui.layer.open({
                    type: 2,
                    title: '选择',
                    content: layui.setter.mvcLink + '/exam/admin_topic_group/select?app_id={{$app['id'] ?? 0}}&select_multi=0&select_value=' + selectValue,
                    maxmin: true,
                    area: '500px',
                    maxHeight: '500px',
                    btn: ['确定', '取消'],
                    yes: function (index, parentLayer) {
                        console.log(index, selectLayer)
                        // 取得iframe窗口
                        // var iframe = window[parentLayer.find('iframe')[0]['name']];
                        var iframe = top.layui.$('#layui-layer-iframe' + index)[0];
                        var selectResult = iframe.contentWindow.selectConfirm();
                        if (selectResult.data.length != 1) {
                            top.layui.layer.msg('请正确选择所属题库');
                            return false;
                        }
                        var selectText = '';
                        // 清空已有值，避免再次选择重复问题
                        selectValue = '';
                        layui.$.each(selectResult.data, function (data_k, data_v) {
                            if (data_k > 0) {
                                selectValue += ',';
                                selectText += ',';
                            }
                            selectValue += data_v.id;
                            selectText += data_v.id + '#' + data_v.name;
                        });
                        // 设置值
                        selectValueDom.val(selectValue);
                        selectTextDom.val(selectText);
                        top.layui.layer.close(index);
                    }
                });
            });
            // 创建
            layui.form.on('submit(submit-create)', function (data) {
                // 获取提交的字段
                var formField = data.field;
                // formField.content = layui.layedit.getContent(layuiEdit);
                console.log('表单字段：', formField);
                // ajax提交
                layui.$.ajax({
                    url: layui.setter.apiLink + '/exam/admin_topic/create?app_id={{$app['id'] ?? 0}}',
                    type: 'POST',
                    data: formField,
                    success: function (result) {
                        if (result.code != 1) {
                            top.layui.layer.alert(result.msg);
                            return false;
                        }
                        var page = top.layui.admin.tabsBody(top.layui.admin.tabsPage.index).find('.layadmin-iframe');
                        console.log('调用页面：', page);
                        page[0].contentWindow.layui.table.reload('exam-topic-list');
                        // 关闭弹层
                        top.layui.layer.close(layerIndex);
                    }
                });
            });
            // 更新
            layui.form.on('submit(submit-update)', function (data) {
                // 获取提交的字段
                var formField = data.field;
                console.log('表单字段：', formField);
                // 当前iframe层的索引
                var layerIndex = parent.layer.getFrameIndex(window.name);
                // ajax提交
                layui.$.ajax({
                    url: layui.setter.apiLink + '/exam/admin_topic/update?app_id={{$app['id'] ?? 0}}&id={{$data['id'] ?? 0}}',
                    type: 'POST',
                    data: formField,
                    success: function (result) {
                        console.log('提交结果：', result);
                        if (result.code != 1) {
                            top.layui.layer.alert(result.msg);
                            return false;
                        }
                        // 重载表格
                        parent.layui.table.reload('exam-topic-list');
                        // 关闭弹层
                        parent.layer.close(layerIndex);
                    }
                });
            });
        });

        /**
         * 创建答案项
         */
        function createAnswerItemFunc(topicType) {
            var topicAnswerArea = layui.$('#topic-answer-area');
            var topicAnswerItemList = topicAnswerArea.children('fieldset');
            var id = 0;
            var index = topicAnswerItemList.length;
            var topicAnswerItemTemplate = layui.$('#topic-' + topicType + '-item').html();
            topicAnswerItemList.each(function (item_k, item_v) {
                var itemId = layui.$(item_v).data('id');
                if (itemId >= id) {
                    id = ++itemId;
                }
            });
            layui.laytpl(topicAnswerItemTemplate).render({
                index: index,
                id: id
            }, function (html) {
                topicAnswerArea.append(html);
                layui.form.render();
            });
        }

        /**
         * 删除答案项
         */
        function deleteAnswerItemFunc(id) {
            layui.$('#topic-answer-' + id).remove();
        }
    </script>
@endsection